<template>
  <div class="information">
      <header>
          <div class="head">
                <span @click="gohome">◀ </span>
                <span>资讯频道</span>
          </div>
      </header>
      <div class="list">
          <li v-for="item in listdata" :key="item"  @click="goinformationdetail">
              <div class="left">
                  <img :src="item.img" alt="">
              </div>
              <div class="right">
                  <div>{{item.title}}</div>
                  <span>{{item.time}}</span>
              </div>
          </li>
      </div>
  </div>
</template>

<script>
export default {
    data() {
        return {
            listdata:[
                {
                    img:'https://images.sqfcw.com/attachment/information/20210617/5808e7cc2287bb56421bc5f5df1b0aae7a425030.jpeg?x-oss-process=style/w_240',
                    title:'聚焦万达南，远见宿豫CLD未来',
                    time:'3小时前',
                    update_time: "2021-06-28",
                    from: "华地在宿迁",
                    categoryname: "楼盘动态",
                },
                {
                    img:'https://images.sqfcw.com/attachment/information/20210617/5808e7cc2287bb56421bc5f5df1b0aae7a425030.jpeg?x-oss-process=style/w_240',
                    title:'碧桂园·江山赋：热销中',
                    time:'3小时前'
                },
                {
                    img:'https://images.sqfcw.com/attachment/information/20210617/5808e7cc2287bb56421bc5f5df1b0aae7a425030.jpeg?x-oss-process=style/w_240',
                    title:'宿迁北京路快速化改造工程项目开工了',
                    time:'5小时前'
                },
                {
                    img:'https://images.sqfcw.com/attachment/information/20210617/5808e7cc2287bb56421bc5f5df1b0aae7a425030.jpeg?x-oss-process=style/w_240',
                    title:'重点关注！宿迁持续掀起招商引资新热潮！',
                    time:'5小时前'
                },
                {
                    img:'https://images.sqfcw.com/attachment/information/20210617/5808e7cc2287bb56421bc5f5df1b0aae7a425030.jpeg?x-oss-process=style/w_240',
                    title:'3年内，宿迁7万户农村居民将喜提新房',
                    time:'一个月前'
                },
                {
                    img:'https://images.sqfcw.com/attachment/information/20210617/5808e7cc2287bb56421bc5f5df1b0aae7a425030.jpeg?x-oss-process=style/w_240',
                    title:'宿迁重点工程最新进展！涉及吾悦广场、苏州街……',
                    time:'5小时前'
                },
                {
                    img:'https://images.sqfcw.com/attachment/information/20210617/5808e7cc2287bb56421bc5f5df1b0aae7a425030.jpeg?x-oss-process=style/w_240',
                    title:'560万翡翠蓝湾独栋别墅 你会买吗？',
                    time:'一个月前'
                },
                {
                    img:'https://images.sqfcw.com/attachment/information/20210617/5808e7cc2287bb56421bc5f5df1b0aae7a425030.jpeg?x-oss-process=style/w_240',
                    title:'刚刚！2021年宿迁小学施教区地图出炉！',
                    time:'一个月前'
                },
                {
                    img:'https://images.sqfcw.com/attachment/information/20210617/5808e7cc2287bb56421bc5f5df1b0aae7a425030.jpeg?x-oss-process=style/w_240',
                    title:'终于等到了！骆马湖畔的临湖叠排+洋房，一不小心惊艳全城~',
                    time:'一个月前'
                },
            ]
        }
    },
    methods: {
        gohome:function(){
            wx.switchTab({
                url:'/pages/home/index'
            })
        },
        goinformationdetail:function(){
            wx.navigateTo({
                url:'/pages/information/informationDetail'
            })
        }
    },
}
</script>

<style lang="scss" scoped>
header{
    width: 100%;
    background: linear-gradient(90deg, rgb(5,117,241), rgb(27,137,247), rgb(55,163,255));
}
.head{
    width: 90%;
    margin: 0 auto;
    height: 160rpx;
    line-height: 150rpx;
    font-size: 20px;
    color: #fff;
    display: flex;
    >span:nth-child(1){
        cursor: pointer;
    }
    >span:nth-child(2){
        margin-left: 32%;
    }
}
.list{
    display: flex;
    flex-direction: column;
    >li{
        width: 90%;
        margin: 0 auto;
        height: 160rpx;
        display: flex;
        margin-bottom: 20rpx;
        margin-top: 50rpx;
        .left{
            width: 220rpx;
            height: 160rpx;
            >img{
                width: 100%;
                height: 100%;
                border-radius: 16rpx;
            }
        }
        .right{
            width: 480rpx;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            margin-left: 20rpx;
            >div{
                font-size: 14px;
                font-weight: bold;
                display: flex;
                flex-wrap: wrap;
            }
            >span{
                color: rgb(156,158,156);
                font-size: 12px;
                margin-bottom: 20rpx;
            }
        }
    }
}
</style>